<template>
  <div>
    <!-- 上 -->
    <el-card  class="co-middle">
          <el-form :inline="true" class="demo-form-inline">
             <el-row class="ggggg">
              <el-form-item label="运输任务编号:" prop="transportTaskId">
    <el-input v-model="pageing.transportTaskId" placeholder="请输入运输任务编号" ></el-input>
  </el-form-item >
  <el-form-item label="起始地机构:" label-width="160px">
    <template>
       <Treeselect
       class="treeselect-main"
                v-model="pageing.startAgencyId"
                :options="tree"
                :normalizer="normalizer"
                placeholder="请选择起始地机构"
                 :append-to-body="true"
              />
    </template>
    <!-- <el-select v-model="tree" placeholder="请选择起始地机构" :normalizer="normalizer">
      <el-option :label="item.value" :value="item.value" v-for="item in tree" :key="item.id"   ></el-option>
    </el-select> -->
  </el-form-item >
   <el-form-item label="目的地机构:"  label-width="200px" style="margin-left:50px">
   <Treeselect
     class="treeselect-main"
                v-model="pageing.endAgencyId"
                :options="tree"
                :normalizer="normalizer"
                placeholder="请选择目的地机构"
                  :append-to-body="true"
              />
  </el-form-item>
   </el-row>
        </el-form>
        <!--  -->
        <el-form :inline="true" :model="{tableData}" >

  <el-form-item label="回车时间:" label-width="100px">
   <el-date-picker
   style="width:210px"
   align="center"
      v-model="value1"
      type="datetimerange"
       range-separator="至"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      :default-time="['12:00:00']">
    </el-date-picker>
    <!-- <el-input v-model="formInline.user" placeholder="请输入车辆类型"></el-input> -->
  </el-form-item>
   <el-form-item label="车辆是否可用:"  label-width="160px">
    <el-select v-model="pageing.isAvailable" placeholder="请选择">
       <el-option :value="null" label="全部" />
                <el-option :value="true" label="可用" />
                <el-option :value="false" label="不可用" />
    </el-select>
  </el-form-item>
   <el-form-item class="anniu">
   <template >
     <el-button type="danger" @click="search">搜索</el-button>
    <el-button @click="reset">重置</el-button>
   </template>
  </el-form-item>
       </el-form>
      </el-card>
      <!-- 下 -->
  <el-card>
         <el-table :data="tableData" style="width: 100%"  stripe :header-cell-style="{background:'#f8faff',color:'#818693'}">
    <el-table-column prop="transportTaskId" label="运输任务编号" width="180"> </el-table-column>
    <el-table-column prop="startAgencyName" label="起始地机构" width="130"></el-table-column>
    <el-table-column prop="endAgencyName" label="目的地机构" width="180"> </el-table-column>
    <el-table-column prop="transportOrderNumber"  label="运单数量" width="180"> </el-table-column>
    <el-table-column prop="outStorageTime" label="出车时间" width="200"></el-table-column>
    <el-table-column prop="intoStorageTime" label="回车时间" width="155"> </el-table-column>
    <el-table-column prop="licensePlate" label="车牌号码" width="145"> </el-table-column>
    <el-table-column prop="isAvailable" label="车辆是否可用" width="135">
      <template #default="{row}">
             <el-row type="flex">
              <div :class="{green: row.isAvailable ,red: !row.isAvailable }"></div>
              {{row.isAvailable?'可用':'不可用'}}
             </el-row>
      </template>
       </el-table-column>
    <el-table-column fixed="right" label="操作" width="50">
      <template #default="{row}">
        <el-button @click="$router.push(`returnregistration/info/${row.id}`)" type="text" size="small" >查看</el-button>
      </template>
    </el-table-column>
  </el-table>
  </el-card>
  </div>
</template>

<script>

import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { intoStorageEndApi } from '@/api/returnregistration'
import { treeShapedApi } from '@/api/institution'
export default {
  name: 'return-registration',
  components: {
    Treeselect
  },
  data () {
    return {
      tree: [], // 树形数据
      list: [], // 起始地下拉框
      form: [],
      value1: '',
      formInline: {
        user: '',
        region: ''
      },
      tableData: [],
      pageing: {
        page: 1,
        pageSize: 10,
        transportTaskId: null,
        startAgencyId: null,
        endAgencyId: null,
        intoStorageStartTime: null,
        intoStorageEndTime: null,
        isAvailable: null
      },
      ids: null,
      backTime: []
    }
  },
  methods: {
    normalizer (node) {
      // console.log(node)
      // 当子节点也就是children=[]时候去掉子节点
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children && node.children.length > 0 ? node.children : 0
      }
    },
    // 下拉树形结构
    async initTree () {
      const res = await treeShapedApi()
      this.tree = JSON.parse(res.data)
      console.log(this.tree)
    },
    // 渲染数据
    async  getUserList () {
      const re = await intoStorageEndApi(this.pageing)
      // console.log(re.data.items)
      this.pageing.intoStorageStartTime = this.backTime[0]
      this.pageing.intoStorageEndTime = this.backTime[1]
      this.tableData = re.data.items
      this.form = re.data.items
      // console.log(this.form.transportTaskId)s
    },
    // 点击搜索
    async  search () {
      this.getUserList()
    },
    // 点击重置
    reset () {
      this.pageing = {
        page: 1,
        pageSize: 10,
        transportTaskId: null,
        startAgencyId: null,
        endAgencyId: null,
        intoStorageStartTime: null,
        intoStorageEndTime: null,
        isAvailable: null
      }
      this.getUserList()
    }
    // async getStart () {
    //   const res = await treeShapedApi()
    //   // console.log(res)
    //   this.list = JSON.parse(res.data)
    //   console.log(this.list)
    // }
  },
  created () {
    // 初始渲染
    this.getUserList()
    // // 起始地机构下拉框
    // this.getStart()
    // 树形
    this.initTree()
  }
}
</script>

<style lang="scss" scoped>
.anniu {
  margin-left: 60px;
}
.co-middle {
  margin-bottom: 20px;
}
.green{
  background-color: #1dc779;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}
.red{
  background-color: red;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}
.vue-treeselect__menu-container{
  z-index: 999;
}
.vue-treeselect__control {
    padding-left: 5px;
    padding-right: 5px;
    display: table;
    table-layout: fixed;
    /* width: 100%; */
    width: 180px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
    transition-duration: 200ms;
    transition-property: border-color, box-shadow, width, height, background-color, opacity;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.ggggg{
  display: flex;
  justify-content: space-between;
}
.treeselect-main {
  width: 220px;
}
</style>
